<template>
  <div style="display: flex">
    <!--用例列表区-->
    <div style="flex: 2">
      <div style="margin: 20px 30px">
        <el-page-header @back="goBack" content="用例列表"></el-page-header>
      </div>
      <div style="display:flex;margin: 30px">
        <el-input style="width:200px;margin-right: 20px" placeholder="用例名称" clearable v-model="searchInfo.caseName"></el-input>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-dropdown style="margin: auto 20px">
          <el-button type="primary">新增用例<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link :to='{path:"/base/caseSingleAdd",query:{"moduleId":this.moduleId}}'><span>单一接口用例</span></router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link :to='{path:"/base/caseProcessAdd",query:{"moduleId":this.moduleId}}'><span>流程接口用例</span></router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" @click="runCaseBatch()">批量运行</el-button>
      </div>
      <!--用例列表-->
      <div style="width: 100%">
        <el-table :data="tableData" @selection-change="selectChange" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
          <!--          <el-table-column label="序号" prop="pk"></el-table-column>-->
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="用例名称" prop="fields.name"></el-table-column>
          <el-table-column label="用例类型">
            <template slot-scope="scope">
              <span v-if="scope.row.fields.type_case==='single'">单一接口用例</span>
              <span v-else-if="scope.row.fields.type_case==='process'">流程接口用例</span>
            </template>
          </el-table-column>
          <el-table-column label="所属项目">
            <template slot-scope="scope">
              <span v-for="item in projectList" v-if="parseInt(scope.row.fields.belong_project) === item.pk">{{item.fields.project_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属模块">
            <template slot-scope="scope">
              <span v-for="item in moduleList" v-if="scope.row.fields.belong_module === item.pk">{{item.fields.module_name}}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column label="创建者" prop='fields.author'></el-table-column>-->
          <el-table-column label="是否通过">
            <template slot-scope="scope">
              <el-button type="primary" size='small' @click="getReport(scope.row.fields.report_path)">
                <span v-if="scope.row.fields.status_case === 1" style="color: green">通过</span>
                <span v-else-if="scope.row.fields.status_case === -1" style="color: red">未通过</span>
                <span v-else-if="scope.row.fields.status_case === 0">未执行</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="runCaseRow(scope.$index, tableData)" type="text" size="small">运行</el-button>
              <el-button @click.native.prevent="editCaseRow(scope.$index, tableData)" type="text" size="small">编辑</el-button>
              <el-button @click.native.prevent="deleteCaseRow(scope.$index,tableData)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchInfo.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background>
        </el-pagination>
      </div>
      <!--编辑单一接口用例-->
      <el-dialog :title="dialog_title" :visible.sync="dialogVisibleSingle" width="50%" style="text-align: left">
        <div class="interval">
          <el-button type="primary" size="medium" @click="editCaseSub()">提 交</el-button>
        </div>
        <el-tabs value="first" type="card" style="margin-top: 20px">
          <!--用例信息-->
          <el-tab-pane label="用例信息" name="first">
            <el-form :model="caseInfo" inline label-width="80px" style="width: 600px" label-position="right">
              <el-form-item label="用例名称">
                <el-input v-model="caseInfo.name" clearable style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="所属项目">
                <el-select style="width: 400px" v-model="caseInfo.belong_project" filterable placeholder="请选择项目">
                  <el-option v-for="item in projectList" :key="item.pk" :label="item.fields.project_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属模块">
                <el-select style="width: 400px" v-model="caseInfo.belong_module" filterable placeholder="请选择模块">
                  <el-option v-for="item in moduleList" :key="item.pk" :label="item.fields.module_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可选配置">
                <el-select style="width: 400px">
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!--用例变量等信息-->
          <el-tab-pane label="变量" name="second">
            <div class="interval">
              <el-button type="primary" size="small" @click="addVariables()">添加变量</el-button>
              <el-button type="primary" size="small" @click="delVariables()">批量删除变量</el-button>
            </div>
            <!--用例信息base_url-->
            <div>
              <h3>Base_url:</h3>
              <el-input v-model="caseInfo.request.base_url" clearable style="width: 400px">
                <template slot="prepend">Http://</template>
              </el-input>
            </div>
            <!--Variables信息-->
            <div>
              <h3>Variables:</h3>
              <el-table :data="caseInfo.request.variables" @selection-change="selectChange">
                <!--Variables请求数据选择项-->
                <el-table-column type="selection"></el-table-column>
                <!--Variables请求数据key值-->
                <el-table-column label="Key">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                  </template>
                </el-table-column>
                <!--Variables请求数据类型-->
                <el-table-column label="Type">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Type">
                      <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <!--Variables请求数据value值-->
                <el-table-column label="Value">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                  </template>
                </el-table-column>
                <!--Variables请求数据操作-->
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.variables)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!--用例请求数据-->
          <el-tab-pane label="请求信息" name="third">
            <div class="interval">
              <el-button type="primary" size='small' @click="addData()">添加Data</el-button>
              <el-button type="primary" size='small' @click="delData()">批量删除Data</el-button>
              <el-button type="primary" size='small' @click="addHeaders()">添加Headers</el-button>
              <el-button type="primary" size='small' @click="delHeaders()">批量删除Headers</el-button>
            </div>
            <el-form inline :model="caseInfo">
              <el-form-item label="URL">
                <el-input v-model="caseInfo.request.url"></el-input>
              </el-form-item>
              <el-form-item label="Method">
                <el-select v-model="caseInfo.request.method">
                  <el-option v-for="item in reqMethods" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <!--data请求数据-->
              <div>
                <h3>Data(json):</h3>
                <el-table :data="caseInfo.request.json" @selection-change="selectChange">
                  <!--data请求数据选择项-->
                  <el-table-column type="selection"></el-table-column>
                  <!--data请求数据key值-->
                  <el-table-column label="Key">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                    </template>
                  </el-table-column>
                  <!--data请求数据类型-->
                  <el-table-column label="Type">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.Type">
                        <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <!--data请求数据value值-->
                  <el-table-column label="Value">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                    </template>
                  </el-table-column>
                  <!--data请求数据操作-->
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.json)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--headers请求数据-->
              <div>
                <h3>Headers:</h3>
                <el-table :data="caseInfo.request.headers" @selection-change="selectChange">
                  <!--headers请求数据选择项-->
                  <el-table-column type="selection"></el-table-column>
                  <!--headers请求数据key值-->
                  <el-table-column label="Key">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                    </template>
                  </el-table-column>
                  <!--headers请求数据value值-->
                  <el-table-column label="Value">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                    </template>
                  </el-table-column>
                  <!--headers   请求数据操作-->
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.headers)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-tab-pane>
          <!--用例断言等信息-->
          <el-tab-pane label="断言" name="forth">
            <div class="interval">
              <el-button type="primary" size='small' @click="addValidate()">添加断言</el-button>
              <el-button type="primary" size='small' @click="delValidate()">删除断言</el-button>
            </div>
            <!--validate信息-->
            <div style="margin-top: 20px">
              <h3>validate:</h3>
              <el-table :data="caseInfo.request.validate" @selection-change="selectChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="Check">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Check"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="Comparator">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Comparator">
                      <el-option v-for="item in comparators" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="Type">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.Type">
                      <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="Expect">
                  <template slot-scope="scope">
                    <el-input style="width: 300px" v-model="scope.row.Expect"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="删除">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index,caseInfo.request.validate)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!--编辑流程接口用例-->
      <el-dialog :title="dialog_title" :visible.sync="dialogVisibleProcess" width="50%" style="text-align: left">
        <div class="interval">
          <el-button type="primary" size="medium" @click="editCaseSub()">提 交</el-button>
        </div>
        <!--用例信息-->
        <el-tabs value="first" type="card" style="width: 100%;margin-bottom: 50px">
          <!--用例信息-->
          <el-tab-pane label="用例信息" name="first">
            <el-form :model="processCaseInfo" inline label-width="80px" label-position="right" :rules="rules" ref="ruleForm">
              <el-form-item label="用例名称">
                <el-input v-model="processCaseInfo.name" clearable style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="所属项目" prop="belong_project_id">
                <el-select style="width: 400px" v-model="processCaseInfo.belong_project" filterable placeholder="请选择项目">
                  <el-option v-for="item in projectList" :key="item.pk" :label="item.fields.project_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可选模块" prop="belong_module_id">
                <el-select style="width: 400px" v-model="processCaseInfo.belong_module" filterable placeholder="请选择模块">
                  <el-option v-for="item in moduleList" :key="item.pk" :label="item.fields.module_name" :value="item.pk"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Base_url">
                <el-input v-model="processCaseInfo.base_url" clearable style="width: 400px">
                  <template slot="prepend">Http://</template>
                </el-input>
              </el-form-item>
              <el-form-item label="可选配置">
                <el-select style="width: 400px"></el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!--用例公共变量-->
          <el-tab-pane label="公共变量" name="second">
            <el-button type="primary" size='small' style="margin: 10px auto 5px" @click="addCommonVariables">添加变量</el-button>
            <h3 style="margin: 5px auto 10px ">公共变量(Variables):</h3>
            <el-table :data="processCaseInfo.variables" @selection-change="selectChange">
              <!--Variables请求数据选择项-->
              <el-table-column type="selection"></el-table-column>
              <!--Variables请求数据key值-->
              <el-table-column label="变量名称">
                <template slot-scope="scope">
                  <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                </template>
              </el-table-column>
              <!--Variables请求数据类型-->
              <el-table-column label="变量类型">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.Type">
                    <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <!--Variables请求数据value值-->
              <el-table-column label="变量值">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                </template>
              </el-table-column>
              <!--Variables请求数据操作-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,processCaseInfo.variables)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!--测试步骤信息-->
        <div>
          <h3 class="interval">步骤(Steps):</h3>
          <el-button class='interval' type="primary" size='small' @click="stepAdd()">添加步骤</el-button>
          <el-table :data="processCaseInfo.caseSteps">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-tabs value="first" type="card">
                  <!--变量信息-->
                  <el-tab-pane label="私有变量" name="first">
                    <!--Variables信息-->
                    <div class="interval">
                      <el-button type="primary" size='small' @click="addVariables(props.$index,processCaseInfo.caseSteps)">添加私有变量</el-button>
                      <el-button type="primary" size='small' @click="delVariables(props.$index,processCaseInfo.caseSteps)">批量删除</el-button>
                    </div>
                    <div>
                      <h3 class="interval">私有变量(Variables):</h3>
                      <el-table :data="props.row.variables" @selection-change="selectChange">
                        <!--Variables请求数据选择项-->
                        <el-table-column type="selection"></el-table-column>
                        <!--Variables请求数据key值-->
                        <el-table-column label="变量名称">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                          </template>
                        </el-table-column>
                        <!--Variables请求数据类型-->
                        <el-table-column label="变量类型">
                          <template slot-scope="scope">
                            <el-select v-model="scope.row.Type">
                              <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <!--Variables请求数据value值-->
                        <el-table-column label="变量值">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                          </template>
                        </el-table-column>
                        <!--Variables请求数据操作-->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.variables)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                  <!--请求数据信息-->
                  <el-tab-pane label="请求信息" name="second">
                    <el-form inline>
                      <div class="interval">
                        <el-button type="primary" size='small' @click="addData(props.$index,processCaseInfo.caseSteps)">添加Data</el-button>
                        <el-button type="primary" size='small' @click="delData(props.$index,processCaseInfo.caseSteps)">批量删除Data</el-button>
                        <el-button type="primary" size='small' @click="addHeaders(props.$index,processCaseInfo.caseSteps)">添加Headers</el-button>
                        <el-button type="primary" size='small' @click="delHeaders(props.$index,processCaseInfo.caseSteps)">批量删除Headers</el-button>
                      </div>
                      <el-form-item label="Url">
                        <el-input v-model="props.row.request.url" placeholder="请输入url，如'/login'"></el-input>
                      </el-form-item>
                      <el-form-item label="Method">
                        <el-select v-model="props.row.request.method">
                          <el-option v-for="item in reqMethods" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <!--data请求数据-->
                    <div>
                      <h3>Data(json):</h3>
                      <el-table :data="props.row.request.json" @selection-change="selectChange">
                        <!--data请求数据选择项-->
                        <el-table-column type="selection"></el-table-column>
                        <!--data请求数据key值-->
                        <el-table-column label="Data名称">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                          </template>
                        </el-table-column>
                        <!--data请求数据类型-->
                        <el-table-column label="Data类型">
                          <template slot-scope="scope">
                            <el-select v-model="scope.row.Type">
                              <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <!--data请求数据value值-->
                        <el-table-column label="Data值">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                          </template>
                        </el-table-column>
                        <!--data请求数据操作-->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.request.json)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <!--headers请求数据-->
                    <div>
                      <h3>Headers:</h3>
                      <el-table :data="props.row.request.headers" @selection-change="selectChange">
                        <!--headers请求数据选择项-->
                        <el-table-column type="selection"></el-table-column>
                        <!--headers请求数据key值-->
                        <el-table-column label="Key">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                          </template>
                        </el-table-column>
                        <!--headers请求数据value值-->
                        <el-table-column label="Value">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                          </template>
                        </el-table-column>
                        <!--headers   请求数据操作-->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.request.headers)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                  <!--数据提取/断言等信息-->
                  <el-tab-pane label="数据提取/断言" name="third">
                    <div class='interval'>
                      <el-button type="primary" size='small' @click="addExtract(props.$index,processCaseInfo.caseSteps)">添加数据提取</el-button>
                      <el-button type="primary" size='small' @click="delExtract(props.$index,processCaseInfo.caseSteps)">批量删除数据提取</el-button>
                      <el-button type="primary" size='small' @click="addValidate(props.$index,processCaseInfo.caseSteps)">添加断言</el-button>
                      <el-button type="primary" size='small' @click="delValidate(props.$index,processCaseInfo.caseSteps)">删除断言</el-button>
                    </div>
                    <!--extract信息-->
                    <div>
                      <h3>数据提取(Extract):</h3>
                      <el-table :data="props.row.extract" @selection-change="selectChange">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column label="Key">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="Type">
                          <template slot-scope="scope">
                            <el-select v-model="scope.row.Type">
                              <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column label="Value">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Value"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.extract)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <!--validate信息-->
                    <div>
                      <h3>断言(Validate):</h3>
                      <el-table :data="props.row.validate" @selection-change="selectChange">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column label="检查点">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Check"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="判断类型">
                          <template slot-scope="scope">
                            <el-select v-model="scope.row.Comparator">
                              <el-option v-for="item in comparators" :label="item" :value="item"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column label="预期值类型">
                          <template slot-scope="scope">
                            <el-select v-model="scope.row.Type">
                              <el-option v-for="item in dataTypes" :label="item" :value="item"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column label="预期值">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Expected"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.validate)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                  <!--用例parameters/hooks等信息-->
                  <el-tab-pane label="parameters/hooks" name="forth">
                    <div class="interval">
                      <el-button type="primary" size='small' @click="addParameters(props.$index,processCaseInfo.caseSteps)">add parameters</el-button>
                      <el-button type="primary" size='small' @click="delParameters(props.$index,processCaseInfo.caseSteps)">del parameters</el-button>
                      <el-button type="primary" size='small' @click="addHooks(props.$index,processCaseInfo.caseSteps)">add hooks</el-button>
                      <el-button type="primary" size='small' @click="delHooks(props.$index,processCaseInfo.caseSteps)">del hooks</el-button>
                    </div>
                    <!--Parameters信息-->
                    <div>
                      <h3>parameters:</h3>
                      <el-table :data="props.row.parameters" @selection-change="selectChange">
                        <!--parameters请求数据选择项-->
                        <el-table-column type="selection"></el-table-column>
                        <!--parameters请求数据key值-->
                        <el-table-column label="Key">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.Key"></el-input>
                          </template>
                        </el-table-column>
                        <!--parameters请求数据value值-->
                        <el-table-column label="Value">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.Value" style="width: 300px"></el-input>
                          </template>
                        </el-table-column>
                        <!--parameters请求数据操作-->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.parameters)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <!--hooks信息-->
                    <div>
                      <h3>hooks:</h3>
                      <el-table :data="props.row.hooks" @selection-change="selectChange">
                        <!--hooks请求数据选择项-->
                        <el-table-column type="selection"></el-table-column>
                        <!--hooks请求数据Set_hooks值-->
                        <el-table-column label="Setup_hooks">
                          <template slot-scope="scope">
                            <el-input style="width: 300px" v-model="scope.row.setup_hooks"></el-input>
                          </template>
                        </el-table-column>
                        <!--hooks请求数据Teardown_hooks值-->
                        <el-table-column label="Teardown_hooks">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.teardown_hooks" style="width: 300px"></el-input>
                          </template>
                        </el-table-column>
                        <!--hooks请求数据操作-->
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index,props.row.hooks)" type="text" size="small">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </el-table-column>
            <el-table-column label="测试步骤">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stepName" style="width:300px"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="runRow(scope.$index, processCaseInfo.caseSteps)" type="text" size="small">运行</el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index,processCaseInfo.caseSteps)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!--用例测试报告-->
      <el-dialog :title="dialog_title" :visible.sync="dialogReportVisible" style="width: 100%;height: 100%">
        <div v-html="html"></div>
      </el-dialog>
    </div>
    <!--用例配置-->
    <div style="flex: 1;text-align: left;margin: 36px 10px" v-show="configShow">
      <el-button type="primary" size="small" @click="caseConfigSave()">保存</el-button>
      <el-tabs value="first" type="card" style="margin-top: 20px">
        <!--debugtalk编辑区-->
        <el-tab-pane label="Debugtalk" name="first">
          <label>
            <textarea style="background: black;color: white;width: 100%" rows="41" cols="40" v-model="debugtalkInfo.debugtalk"></textarea>
          </label>
        </el-tab-pane>
        <!--.env编辑区-->
        <el-tab-pane label="Env" name="second">
          <label>
            <textarea style="background: black;color: white;width: 100%" rows="41" cols="40" v-model="envInfo.content"></textarea>
          </label>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
    name: "caseList",
    data() {
        return {
            username: "", //用户名称
            moduleId: '', //用例页面属于模块的id值
            debugtalk: '',//debugtalk.py文本内容
            html: '',
            dialogReportVisible: false,
            configShow: false,
            tableData: [],
            moduleList: [],
            projectList: [],
            caseType: "", //用例类型
            dialog_title: '', // 用例编辑窗口title
            dialogVisibleSingle: false,
            dialogVisibleProcess: false,
            reqMethods: ["GET", "POST", "PUT", "DELETE"],
            dataTypes: ['int', 'float', 'string', 'boolean'],
            comparators: ["equals", 'contains', 'startswith', 'endswith', 'less_than'],
            selectItem: [], //选择项目
            caseOldInfo: {},//编辑用例时，保存的原始用例信息
            caseInfo: {
                id: '',
                name: "",
                type_case: "",
                belong_project: "",
                belong_module: "",
                author: "",
                status_case: '',
                request: {
                    base_url: '127.0.0.1:8000',
                    url: "/api/login/",
                    method: "GET",
                    headers: [
                        {
                            Key: "Content-Type",
                            Value: "application/json",
                        }
                    ],
                    json: [
                        {
                            Key: "username",
                            Type: "string",
                            Value: "admin",
                        },
                        {
                            Key: "password",
                            Type: "string",
                            Value: "123456",
                        }
                    ],
                    validate: [
                        {
                            Check: "status_code",
                            Comparator: "equals",
                            Type: "int",
                            Expect: 200,
                        }
                    ],
                    variables: [
                        {
                            Key: "1234",
                            Type: "string",
                            Value: "1234",
                        }
                    ],
                },
            },
            processCaseInfo: {
                id: '',
                name: "流程接口用例01",
                type_case: "single",
                belong_project: "",
                belong_module: "",
                author: "",
                status_case: '',
                base_url: "127.0.0.1:8000",
                variables: [
                    {
                        Key: "1234",
                        Type: "string",
                        Value: "1234",
                    }
                ],
                caseSteps: [
                    {
                        stepName: "第一步",
                        request: {
                            url: "/api/login/",
                            method: "GET",
                            headers: [
                                {
                                    Key: "Content-Type",
                                    Value: "application/json",
                                }
                            ],
                            json: [
                                {
                                    Key: "username",
                                    Type: "string",
                                    Value: "admin",
                                },
                                {
                                    Key: "password",
                                    Type: "string",
                                    Value: "123456",
                                }
                            ],
                        },
                        include: [],
                        validate: [
                            {
                                Check: "status_code",
                                Comparator: "equals",
                                Type: "int",
                                Expect: "200",
                            }
                        ],
                        extract: [
                            {
                                Key: "1234",
                                Type: "string",
                                Value: "content.url",
                            }
                        ],
                        variables: [
                            {
                                Key: "1234",
                                Type: "string",
                                Value: "1234",
                            }
                        ],
                        parameters: [
                            {
                                Key: "1234",
                                Value: "1234",
                            }
                        ],
                        hooks: [
                            {
                                setup_hooks: "",
                                teardown_hooks: "",
                            }
                        ]
                    }
                ]
            },
            debugtalkInfo: {
                id: '',
                belong_module: '',
                belong_project: '',
                debugtalk: '',
            },
            envInfo: {
                id: '',
                belong_module: '',
                belong_project: '',
                content: '',
            },
            rules: {
                belong_project_id: [
                    {required: true, message: '请选择项目', trigger: 'blur'},
                ],
                belong_module_id: [
                    {required: true, message: '请选择模块', trigger: 'blur'},
                ],
            },
            reportPath: '',
            total: 1, //模块总数,1为一个没有意义的数，起占位作用
            searchInfo: {
                moduleId: '',
                caseName: '',
                pageSize: 10,
                currentPage: 1
            },
        }
    },
    methods: {
        getCaseInfo() {
            this.moduleId = this.$route.query.moduleId;
            console.log(`当前用例属于模块${this.moduleId}`);
            this.$axios.get("/api/caseList/", {params: {'moduleId': this.moduleId}})
                .then(res => {
                    this.tableData = res.data.caseList;
                    this.total = res.data.caseNum;
                    this.username = res.data.username;
                })
                .catch(error => {
                    console.log("获取数据失败")
                })
        },
        //获取模块内容
        getModuleList() {
            this.$axios.get("/api/moduleList/")
                .then(res => {
                    console.log('获取模块：');
                    console.log(res.data.moduleList);
                    this.moduleList = res.data.moduleList;
                })
        },
        //获取项目
        getProjectList() {
            this.$axios.get("/api/projectList/")
                .then(res => {
                    console.log('获取项目：');
                    console.log(res.data.projectList);
                    this.projectList = res.data.projectList;
                })
        },
        //获取debugtalk内容
        getDebugtalkInfo(moduleId) {
            this.$axios.get('/api/debugtalk/', {params: {'moduleId': moduleId}})
                .then(res => {
                    console.log('获取debugtalk信息：');
                    console.log(res.data);
                    this.debugtalkInfo = res.data.debugtalkInfo
                });
        },
        //获取env内容
        getEnvInfo(moduleId) {
            this.$axios.get('/api/envInfo/', {params: {'moduleId': moduleId}})
                .then(res => {
                    console.log('获取env信息：');
                    console.log(res.data);
                    this.envInfo = res.data.envInfo
                });
        },
        //搜索用例
        search() {
            this.searchInfo.moduleId = this.moduleId;
            this.$axios.get('/api/searchCase/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    this.tableData = res.data.caseList;
                    this.total = res.data.caseNum;
                    this.searchInfo.currentPage = res.data.currentPage;
                })
        },
        handleSizeChange(val) {
            console.log(`当前每页显示${val}条数据`);
            this.searchInfo.pageSize = val;
            this.searchInfo.moduleId = this.moduleId;
            this.$axios.get('/api/searchCase/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    this.tableData = res.data.caseList;
                    this.total = res.data.caseNum;
                })
        },
        handleCurrentChange(val) {
            console.log(`获取第${val}页数据`);
            this.searchInfo.currentPage = val;
            this.searchInfo.moduleId = this.moduleId;
            this.$axios.get('/api/searchCase/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    this.tableData = res.data.caseList;
                    this.total = res.data.caseNum;
                })
        },
        // 打开用例编辑窗口
        editCaseRow(index, rows) {
            this.caseOldInfo = rows[index];
            console.log("获取待编辑用例：");
            console.log(this.caseOldInfo);
            this.caseType = this.caseOldInfo.fields.type_case;
            this.$axios.get('api/caseEdit/', {params: {'caseInfo': this.caseOldInfo}})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        if (this.caseType === 'single') {
                            this.caseInfo = res.data.caseList;
                            console.log('待编辑的用例信息');
                            console.log(this.caseInfo);
                            this.dialog_title = '编辑单一接口用例';
                            this.dialogVisibleSingle = true;
                        } else {
                            this.processCaseInfo = res.data.caseList;
                            console.log('待编辑的用例信息');
                            console.log(this.processCaseInfo);
                            this.dialog_title = '编辑流程接口用例';
                            this.dialogVisibleProcess = true;
                        }
                    }
                })
                .catch(error => {
                    console.log("获取数据失败")
                });
        },
        // 编辑用例，提交数据到后台，区分流程和单一
        editCaseSub() {
            if (this.caseType === 'single') {
                this.$axios.put('api/caseEdit/', {'caseInfo': this.caseInfo, 'caseOldInfo': this.caseOldInfo},)
                    .then(res => {
                        if (res.data.msgCode === "1") {
                            console.log('编辑单一接口用例成功');
                            this.dialogVisibleSingle = false;
                            this.getCaseInfo()
                        }
                    })
                    .catch(error => {
                        console.log("获取数据失败")
                    });
            } else {
                this.$axios.put('api/caseEdit/', {'caseInfo': this.processCaseInfo, 'caseOldInfo': this.caseOldInfo},)
                    .then(res => {
                        if (res.data.msgCode === "1") {
                            console.log('编辑流程接口用例成功');
                            this.dialogVisibleProcess = false;
                            this.getCaseInfo()
                        }
                    })
                    .catch(error => {
                        console.log("获取数据失败")
                    });
            }
        },
        // 删除列表中的单条用例
        deleteCaseRow(index, rows) {
            let caseInfo = rows[index];
            this.$axios.delete("/api/caseDel/", {data: {"caseInfo": caseInfo}})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        console.log('删除用例：');
                        rows.splice(index, 1)
                    }
                })
        },
        // 删除用例中的单体数据
        deleteRow(index, rows) {
            rows.splice(index, 1)
        },
        // 添加流程用例测试步骤
        stepAdd() {
            this.processCaseInfo.caseSteps.push(
                {
                    stepName: "测试步骤",
                    request: {
                        url: "/api/login/",
                        method: "GET",
                        headers: [
                            {
                                Key: "Content-Type",
                                Value: "application/json",
                            }
                        ],
                        json: [
                            {
                                Key: "username",
                                Type: "string",
                                Value: "admin",
                            },
                            {
                                Key: "password",
                                Type: "string",
                                Value: "123456",
                            }
                        ],
                    },
                    include: [],
                    validate: [
                        {
                            Check: "status_code",
                            Comparator: "equals",
                            Type: "int",
                            Expect: "200",
                        }
                    ],
                    extract: [
                        {
                            Key: "1234",
                            Value: "1234",
                        }
                    ],
                    variables: [
                        {
                            Key: "1234",
                            Type: "string",
                            Value: "1234",
                        }
                    ],
                    parameters: [
                        {
                            Key: "1234",
                            Value: "1234",
                        }
                    ],
                    hooks: [
                        {
                            setup_hooks: "",
                            teardown_hooks: "",
                        }
                    ]
                }
            )
        },
        // 用例添加请求数据,区分流程和单一用例
        addData(indexData, Data) {
            if (this.caseType === 'single') {
                this.caseInfo.request.json.push(
                    {
                        Key: "1234",
                        Type: "string",
                        Value: "1234",
                    }
                )
            } else {
                Data[indexData].request.json.push(
                    {
                        Key: "1234",
                        Type: "string",
                        Value: "1234",
                    }
                )
            }
        },
        // 用例删除请求数据，区分流程和单一用例
        delData(indexData, Data) {
            console.log("删除选择的json数据：");
            for (let i = 0; i < this.selectItem.length; i++) {
                if (this.caseType === 'single') {
                    let index = this.caseInfo.request.json.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        this.caseInfo.request.json.splice(index, 1);
                    }
                } else {
                    let index = Data[indexData].request.json.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        Data[indexData].request.json.splice(index, 1);
                    }
                }

            }
        },
        //添加用例私有变量，区分流程和单一
        addVariables(indexData, Data) {
            if (this.caseType === 'single') {
                this.caseInfo.request.variables.push(
                    {
                        Key: "1234",
                        Type: "string",
                        Value: "1234",
                    }
                )
            } else {
                Data[indexData].variables.push(
                    {
                        Key: "1234",
                        Type: "string",
                        Value: "1234",
                    }
                )
            }
        },
        //删除用例私有变量，区分流程和单一
        delVariables(indexData, Data) {
            console.log("删除私有变量：");
            for (let i = 0; i < this.selectItem.length; i++) {
                if (this.caseType === 'single') {
                    let index = this.caseInfo.request.variables.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        this.caseInfo.request.variables.splice(index, 1);
                    }
                } else {
                    let index = Data[indexData].variables.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        Data[indexData].variables.splice(index, 1);
                    }
                }
            }
        },
        //添加用例请求头信息，区分流程和单一
        addHeaders(indexData, Data) {
            if (this.caseType === 'single') {
                this.caseInfo.request.headers.push(
                    {
                        Key: "1234",
                        Value: "1234",
                    }
                )
            } else {

                Data[indexData].request.headers.push(
                    {
                        Key: "1234",
                        Value: "1234",
                    }
                )
            }

        },
        //删除用例请求头信息，区分流程和单一
        delHeaders(indexData, Data) {
            console.log("删除选删除请求头信息：");
            for (let i = 0; i < this.selectItem.length; i++) {
                if (this.caseType === 'single') {
                    let index = this.caseInfo.request.headers.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        this.caseInfo.request.headers.splice(index, 1);
                    }
                } else {
                    let index = Data[indexData].request.headers.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        Data[indexData].request.headers.splice(index, 1);
                    }
                }
            }
        },
        //流程接口添加公共变量
        addCommonVariables() {
            this.processCaseInfo.variables.push(
                {
                    Key: "1234",
                    Type: "string",
                    Value: "1234",
                }
            )
        },
        //用例添加断言，区分流程和单一
        addValidate(indexData, Data) {
            if (this.caseType === 'single') {
                this.caseInfo.request.validate.push(
                    {
                        Check: "",
                        Comparator: "",
                        Type: "",
                        Expect: "",
                    }
                )
            } else {
                Data[indexData].validate.push(
                    {
                        Check: "",
                        Comparator: "",
                        Type: "",
                        Expect: "",
                    }
                )
            }
        },
        //删除用例断言，区分流程和单一
        delValidate(indexData, Data) {
            console.log("删除选择项目：");
            for (var i = 0; i < this.selectItem.length; i++) {
                if (this.caseType === 'single') {
                    let index = this.caseInfo.request.validate.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        this.caseInfo.request.validate.splice(index, 1);
                    }
                } else {
                    let index = Data[indexData].validate.indexOf(this.selectItem[i]);
                    if (index > -1) {
                        Data[indexData].validate.splice(index, 1);
                    }
                }
            }
        },
        addParameters() {
            this.caseInfo.parameters.push(
                {
                    Key: "1234",
                    Value: "1234",
                }
            )
        },
        delParameters() {
            console.log("删除Parameters：");
            for (let i = 0; i < this.selectItem.length; i++) {
                let index = this.caseInfo.parameters.indexOf(this.selectItem[i]);
                if (index > -1) {
                    this.caseInfo.parameters.splice(index, 1);
                }
            }
        },
        //列表批量选择事件
        selectChange(val) {
            this.selectItem = val;
            console.log("获取选择项目：");
            console.log(this.selectItem)

        },
        // 页面返回
        goBack() {
            console.log('go back');
            this.$router.back();
        },
        //执行单条用例
        runCaseRow(index, rows) {
            let caseInfo = rows[index];
            this.$axios.post("/api/runCase/", {'caseInfo': caseInfo})
                .then(res => {
                    console.log('运行单条用例：');
                    // setTimeout(this.getCaseInfo(), 5000);
                    location.reload();
                    // this.getCaseInfo();
                });
        },
        //批量执行多条用例
        runCaseBatch() {
            this.$axios.post("/api/runCase/", {'caseInfo': this.selectItem})
                .then(res => {
                    console.log('运行多条用例：');
                    // setTimeout(this.getCaseInfo(), 5000);
                    location.reload();
                    // this.getCaseInfo()
                });
        },
        // 添加dubugtalkhe
        caseConfigSave() {
            this.$axios.post('/api/caseConfigSave/', {'debugtalkInfo': this.debugtalkInfo, 'envInfo': this.envInfo})
                .then(res => {
                    if (res.data.msgCode === '1') {
                        console.log('保存debugtalk数据：');
                        this.$message(
                            {
                                message: '保存成功',
                                type: 'success',
                                showClose: true,
                            }
                        )
                    }
                });
        },
        getReport(data) {
            this.$axios.get('/api/caseReport/', {params: {'reportName': data}})
                .then(res => {
                    // this.$router.push('/base/report')
                    this.html = res.data.report;
                    this.dialogReportVisible = true;
                })
        }
    },
    created() {
        this.getProjectList();
        this.getModuleList();
        this.getCaseInfo();
        // 当从模块进入用例，展示debugtalk窗口：
        console.log("获取当前路由url");
        console.log(this.$route.fullPath);
        console.log(this.$route);
        if (this.$route.fullPath.indexOf('moduleId') !== -1) {
            this.moduleId = this.$route.query.moduleId;
            this.getDebugtalkInfo(this.moduleId);
            this.getEnvInfo(this.moduleId);
            this.configShow = true;
        }
    }
}
</script>

<style scoped>
  .interval {
    margin: 10px auto;
  }
</style>
